<template>
	<view class="container" :style="{height:`calc(100vh - ${height}px)`}">
		<Header title="中国【西部】健康食品博览会"></Header>
		<view class="wapper">
			<view class="infos">
				<view class="infos_item" v-for="(v,k) in contents" :key="k" @click="toDetail(v)">
					<view class="infos_item_left">
						<view class="infos_item_left_top">
							{{v.title}}
						</view>
						<view class="infos_item_left_bottom">
							{{v.addDate}}
						</view>
					</view>
					<view class="infos_item_right">
						<image :src="getUrl(v.imageUrl)"></image>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import Header from '@/components/haeder.vue'
	import banner1 from '@/static/banner/banner1.png'
	export default {
		components: {
			Header
		},
		data() {
			return {
				height: 0,
				searchParams: {
					siteId: 12,
					channelId: 17,
					page: 1,
					perPage: 10,
					order: [{
						desc: true
					}]
				},
				contents: [],
				total: 0,
				status: 0
			}
		},
		methods: {
			toDetail(v) {
				if (v.linkUrl) {
					window.open(v.linkUrl)
				} else {
					uni.navigateTo({
						url: "./detail?title=资讯详情&content=" + v.content
					})
				}
			},
			async search() {
				let res = await this.$api.getInofs(this.searchParams)
				this.total = res.totalCount
				this.contents = res.contents
			}
		},
		async onReachBottom() {
			if (this.total > this.contents.length) {
				this.status = 1
				this.searchParams.page++
				await this.search()
				this.status = 0
			} else {
				this.status = 2
			}
		},
		async onPullDownRefresh() {
			this.searchParams.page = 1
			this.search()
			uni.stopPullDownRefresh()
		},
		async mounted() {
			this.search()
		},
		created() {
			let app = uni.getSystemInfoSync();
			this.height = app.windowBottom
		}
	}
</script>

<style scoped lang="scss">
	.container {
		width: 100vw;
		overflow: auto;
		display: flex;
		flex-direction: column;

		.wapper {
			flex: 1;
			background: #f2f2f2;
			padding: 20rpx;
			z-index: 100;
			margin-top: -280rpx;
			border-top-left-radius: 60rpx;
			border-top-right-radius: 60rpx;

			.infos {
				margin: 40rpx auto;

				.infos_item {
					padding: 21rpx 18rpx;
					border-bottom: 1px solid #D9D9D9;
					display: flex;
					justify-content: space-between;

					.infos_item_left {
						display: flex;
						flex-direction: column;
						justify-content: space-between;
						margin-right: 62rpx;

						.infos_item_left_top {
							font-size: 32rpx;
							font-family: PingFang SC;
							font-weight: 500;
							color: #333333;
						}

						.infos_item_left_bottom {
							font-size: 22rpx;
							font-family: Microsoft YaHei;
							font-weight: 400;
							color: #999999;
						}
					}

					.infos_item_right {
						image {
							width: 223rpx;
							height: 168rpx;
						}
					}

					&:last-child {
						border: none;
					}
				}
			}

		}
	}
</style>